<template>
  <div id="ranking-board">
    <div class="ranking-board-title">时间段使用占比</div>
    <el-row
      :gutter="24"
      style="overflow: hidden">
      <el-col
        :span="24"
        style="padding: 0">
        <el-carousel
          :interval="15000"
          indicator-position="none"
          style="width: 100%">
          <el-carousel-item
            v-for="(item, index) in renderData"
            :key="index">
            <histogram
              :index="index"
              :raw-data="item"
              :loading="loading"/>
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
    <!--<histogram v-for="(item, index) in renderData" :index="index" :key="index" :rawData="item" :loading="loading"/>-->
  </div>
</template>

<script>
import commonMixin from '@/mixins/common'
import histogram from './histogram'

export default {
  name: 'TopLeft',
  components: { histogram },
  mixins: [ commonMixin ],
  data () {
    return {
      loading: false,
      rawData: []
    }
  },
  computed: {
    renderData () {
      return this.rawData
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      this.loading = true
      let { data: res } = await this.$http.get(this.getApiUrl('datapanel/show/usedTimeRank', false))
      this.loading = false
      if (res.code === 0) {
        this.rawData = res.data
      }
    }
  }
}
</script>

<style lang="less">

  #ranking-board {
    box-shadow: 0 0 3px blue;
    background-color: rgba(6, 30, 93, 0.5);
    border-top: 2px solid rgba(1, 153, 209, .5);
    box-sizing: border-box;
    padding: 0px 30px;

    .ranking-board-title {
      font-weight: bold;
      height: 50px;
      display: flex;
      align-items: center;
      font-size: 20px;
    }

  }

  /*.el-carousel__container{ // 导致遮住图标横坐标*/
    /*height: 360px;*/
    /*overflow-x: hidden;*/
  /*}*/
</style>
